<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n()

const props = defineProps<{
  tableData: {
    Time: number
    bet_count: number
    valid_bet_amount: number
    net_amount: number
  }[]
}>()


const tableData = computed(() => {
  return props.tableData
})


</script>

<template>
  <div class="statistics-table">
    <div class="table-header">
        <span class="col-type">{{ t('detail_date') }}</span>
      <span class="col-count">{{ t('betCount') }}</span>
      <span class="col-bet">{{ t('validBet') }}</span>
      <span class="col-win">{{ t('winLose') }}</span>
    </div>
      <div class="table-row" v-for="(row, idx) in tableData" :key="idx" v-if="tableData.length > 0" >
                <span class="col-type">{{ 
                row.Time === 0 ? t('today') :
                row.Time <= 7 ? t('last_7_days') :
                row.Time <= 30 ? t('last_30_days') : 
                row.Time <= 90 ? t('last_60_days') : 
                row.Time
                }}</span>
             <span class="col-count">{{ row.bet_count }}</span>
             <span class="col-bet">{{ Number(row.valid_bet_amount).toFixed(2) }}</span>
             <span class="col-win" :class="{'win': row.net_amount > 0, 'lose': row.net_amount < 0}">
               {{ row.net_amount > 0 ? '+' : '' }}{{ Number(row.net_amount).toFixed(2) }}
             </span>
      </div>
      <AppNoData v-else/>
  </div>
</template>

<style scoped>
.statistics-table {
  background: #292D2E;
  padding: 0;
}
.table-header, .table-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  font-size: 14px;
}

.table-row:nth-child(even) {
  background: linear-gradient(0deg, #3A4142 0%, #3A4142 100%), #323738;
}
.col-type {
  justify-content: flex-start !important;
}
.col-count, .col-bet {
  justify-content: center !important;
}
.col-win {
  justify-content: flex-end !important;
}
.table-header span, .table-row span {
  display: flex;
  align-items: center;
}
.win {
  color: #24EE89;
  font-weight: bold;
}
.lose {
  color: #B3BEC1;
}
</style>
